import React, {memo, useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import "./index.css";
import * as echarts from 'echarts';
import {saveExportObj, saveExportObjCn} from "../../pages/main/export/store/actionCreators";

export default memo(function GeneChart(props) {
  const dispatch = useDispatch();
  const {option} = props;
  let {exportObj, exportObjCn, isCN} = useSelector(state => ({
    exportObj: state.exportReducer.exportObj,
    exportObjCn: state.exportReducer.exportObjCn,
    isCN: state.languageReducer.isCN
  }));
  let myChart;
  useEffect(() => {
    console.log(option);
    myChart = echarts.init(document.getElementById('geneMain'));
    myChart.clear();
    myChart.setOption(option);
    let exportObjReport = isCN ? exportObjCn : exportObj;
    exportObjReport.analysis.imgGeneExpressionBar = myChart.getDataURL(
      {
        type: 'png'
      }
    ).split(",")[1];
    isCN ? dispatch(saveExportObjCn(exportObjReport))
      : dispatch(saveExportObj(exportObjReport));
  }, [option, exportObj,exportObjCn]);
  return (
    <div>
      <div id="geneMain" style={{width: 1089, height: 360}}/>
    </div>
  );
});